<template>
  <div class="startEndTime">
    <a-date-picker
      v-model="startValue"
      :allowClear="false"
      :disabled-date="disabledStartDate"
      show-time
      inputReadOnly
      :format="format"
      placeholder="请选择开始时间"
      @openChange="handleStartOpenChange"
    />
    <a-date-picker
      v-model="endValue"
      :allowClear="false"
      :disabled-date="disabledEndDate"
      show-time
      inputReadOnly
      :format="format"
      placeholder="请选择结束时间"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    />
  </div>
</template>
<script>
import moment from 'moment'
const endDay = moment(new Date()).format('YYYY-MM-DD ' + '23:59:59')
export default {
  name: '',
  props: {
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm',
    },
    showTime: [Object, Boolean],
    showNowTime: {
      type: Boolean,
      default: false,
    },
    resetTime: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      startValue: null,
      endValue: null,
      startOpen: false,
      endOpen: false,
    }
  },
  watch: {
    startValue(val) {
      this.$emit('timeChange', val, 1)
    },
    endValue(val) {
      this.$emit('timeChange', val, 2)
    },
    resetTime(val) {
      if (val == true) {
        this.startValue = null
        this.endValue = null
      }
    },
  },
  mounted() {
    if (this.showNowTime) {
      this.startValue = moment(moment(new Date()).format('YYYY-MM-DD'))
      this.endValue = moment(moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59')
    }
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue
      if (endValue) {
        return startValue.valueOf() >= endValue.valueOf()
      }
      return startValue.valueOf() > new Date().getTime()
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue
      if (startValue && endValue.valueOf() > startValue.valueOf()) {
        return endValue.valueOf() > moment(endDay).valueOf() && endValue.valueOf() > startValue.valueOf()
      }
      if (!startValue) {
        return endValue.valueOf() > moment(endDay).valueOf()
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    },

    getValue(startValue, endValue) {
      this.startValue = startValue
      this.endValue = endValue
    },
  },
}
</script>
<style lang="less">
.startEndTime {
  width: 100%;
  .ant-calendar-picker {
    width: 50% !important;
    .ant-calendar-picker-icon {
      color: #dddfe0;
    }
  }
}
</style>
